<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>积分商场</title>
    <link rel="icon" href="/img/favicon.png" type="image/png">

    <script src="libs/axios.min.js"></script>
    <script src="libs/vue.global.js"></script>
    <script src="libs/index.full.js"></script>
    <script src="js/navbar.js"></script>
    <link rel="stylesheet" href="libs/index.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/points_mall.css">
</head>
<body>
<div id="app" class="full_container">
    <div id="navbar" class="navbar"></div>
    <div class="mall">
        <div class="item" v-for="(good, index) in goodsList" :key="good.id" @click="open(good.id)">
            <img class="item-img" :src="good.img">
            <div class="item_footer">
                <div class="item_footer-name">{{good.name}}</div>
                <div class="item_footer-content">
                    <span class="point">积分:{{good.points}}</span>
                    <span class="quantity">剩余数量:{{good.quantity}}</span>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="商品详情" width="800px">
            <div class="dialog-mall" v-if="selectedGood">
                <img :src="selectedGood.img" style="width: 40%; height: 400px; margin-bottom: 10px;">
                <div class="dialog-content">
                    <h3>{{ selectedGood.name }}</h3>
                    <h4>{{ selectedGood.content }}</h4>
                    <div class="dialog-footer">
                        <span class="point">积分：{{ selectedGood.points }}</span>
                        <span class="quantity">剩余数量：{{ selectedGood.quantity }}</span>
                    </div>
                </div>
            </div>

            <template #footer>
                <el-button type="primary" @click="confirmExchange">兑换</el-button>
            </template>
        </el-dialog>
        <el-dialog
                v-model="confirmVisible"
                title="确认兑换"
                width="300px"
                :before-close="() => { confirmVisible = false }"
        >
            <p>收货地址：{{ address }}</p>
            <p>是否确定兑换该商品？</p>
            <template #footer>
                <el-button type="primary" @click="exchange">确定</el-button>
                <el-button @click="confirmVisible = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</div>
<script>
    const {createApp} = Vue;

    const {ElMessage} = ElementPlus;

    createApp({
        data(){
            return{
                goodsList:[],
                dialogVisible:false,
                confirmVisible:false,
                selectedGood:'',
                address:'',
                currentUserId:'',
                goodId:'',
                losePoint:0,
                permissionLevel:0,
            }
        },
        mounted() {
            this.getCurrentUser();
        },
        methods: {
            getCurrentUser() {
                axios.get('http://localhost:8080/chat/currentUser')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.currentUserId = response.data.data.id;
                            this.permissionLevel = response.data.data.permissionLevel;
                            console.log(this.currentUserId);
                            this.getData(); // 在这里调用
                        } else {
                            console.warn("未登录，跳转到登录页");
                            window.location.href = "/login.html"; // 重定向到登录页
                        }
                    })
                    .catch(error => console.error("获取当前用户失败:", error));
            },
            getData(){
                axios.get(`http://localhost:8080/goods/getList`, {
                })
                    .then(response => {
                        if(response.data.code === 200){
                            this.goodsList = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('获取商品列表失败', error);
                    });
            },
            open(index){
                this.dialogVisible = true;
                this.selectedGood = this.goodsList[index-1];
                this.goodId = this.selectedGood.id;
            },
            confirmExchange(){
                this.confirmVisible = true;
            },
            exchange(){
                if(this.permissionLevel >= 2){
                    axios.get(`http://localhost:8080/goods/exchange`, {
                        params: {
                            userId: this.currentUserId,
                            id: this.goodId
                        }
                    })
                        .then(response => {
                            if(response.data.code === 200){
                                ElMessage.success("兑换成功")
                                this.getData();
                                this.change();
                            }
                        })
                        .catch(error => {
                            console.error('兑换失败', error);
                        });
                    this.confirmVisible = false;
                    this.dialogVisible = false;
                }else {
                    ElMessage.warning("对不起，您没有权限")
                }
            },
            formatDateTime(date) {
                const pad = n => (n < 10 ? '0' + n : n);
                return date.getFullYear() + '-' +
                    pad(date.getMonth() + 1) + '-' +
                    pad(date.getDate()) + ' ' +
                    pad(date.getHours()) + ':' +
                    pad(date.getMinutes()) + ':' +
                    pad(date.getSeconds());
            },
            change(){
                const createTime = this.formatDateTime(new Date())
                const data = {
                    content: "兑换商品",
                    userId: this.currentUserId,
                    createTime: createTime,
                    pointsChange: "-" + this.selectedGood.points
                }
                axios.post('http://localhost:8080/pointsRecords',data)
                    .then(response =>{
                        if(response.data.code === 200){
                            console.log("积分-",this.addPoints)
                        }
                    })
                    .catch(error => console.error("积分记录失败",error))
            }
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>